<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>裁剪头像</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="../css/mui.min.css" rel="stylesheet" />
        <link href="../css/cropper.css" rel="stylesheet" />
        <style type="text/css">
            body {
                background-color: #000000;
            }
            
            #cropper-example-1 {
                background-color: #000000;
                height: 93%;
                width: 100%;
                position: absolute;
            }
            
            .divbut {
                width: 100%;
                text-align: center;
                position: fixed;
                z-index: 2;
                bottom: 0px;
                background-color: #000000;
                height: 7.5%;
                line-height: 50px;
            }
            
            .divbut>div:first-child {
                float: left;
                width: 20%;
            }
            
            .divbut>div:last-child {
                float: right;
                width: 20%;
            }
            
            img#im {
                height: 100%;
                width: 100%;
            }
        </style>
    </head>

    <body>
        <div id="cropper-example-1" class="mui-hidden">
            <img id="im" alt="Picture" />
        </div>

        <div class="divbut">
            <div>
                <p id="quxiao" class="mui-icon mui-icon-closeempty"></p>
            </div>
            <div>
                <p id="xuanqu" class="mui-icon mui-icon-checkmarkempty"></p>
            </div>
        </div>
        <img src="" alt="" class="mui-hidden" id="im_exif" />

        <script type="text/javascript" src="../js/jquery.min.js"></script>
        <script src="../js/mui.min.js"></script>
        <script type="text/javascript" src="../js/exif.js"></script>
        <script src="../js/cropper.js"></script>
        <script src="../js/req.js" type="text/javascript" charset="utf-8"></script>
        <!--
        	作者：592176224@qq.com
        	时间：2018-12-17
        	描述：
        	<script src="../js/fastclick.js"></script>
        	<script src="../js/app.js"></script>
        -->

        <script type="text/javascript">
            /*$(function() {
                //尽量用一下fastclick
                FastClick.attach(document.body);
                ! function() {
                    var i = {
                        aspectRatio: 1 / 1
                    };
                }()
            });*/

            (function(c) {
                var Cro = function() {}
                c.extend(Cro.prototype, {
                    orientation: null,
                    urldata: null,
                    view: null,
                    num: 0,
                    sbx: null,
                    sby: null,
                    n: 0,
                    onReady: function() {
                        var that = this;
                        mui.init();
                        that.bindEvent();
                        that.view = plus.webview.currentWebview();
						console.log(JSON.stringify(that.view));
						//210/(297/2) : 1;
                        var img = document.getElementById("im_exif");
                        img.src = that.view.path;
                        
                        if(that.view.bmtype){
                        	console.log(210/(297/2));
                        }else{
                        	console.log(1);
                        }
                        img.addEventListener("load", function() {
                            //exif调整图片的横竖
                            EXIF.getData(this, function() {
                                var orientation = EXIF.getAllTags(this).Orientation;
                                $("#im").attr("src", that.loadcopyImg(img, orientation));
                                document.getElementById("cropper-example-1").classList.remove("mui-hidden"); //显示裁剪区域
                                that.cropperImg();
                            });
                        })
                    },
                    cropperImg: function() {
                        var that = this;
                        $('#cropper-example-1 > img').cropper({
                            aspectRatio: that.view.bmtype? 210/(297/2) : 1,
                            viewMode:1,
                            autoCropArea: 1,
                            strict: true,
                            background: false,
                            guides: false,
                            highlight: false,
                            dragCrop: false,
                            movable: false,
                            resizable: false,
                            crop: function(e) {
                            	//console.log("裁剪后的数据",data);
                            	//let dataurl = $('#cropper-example-1 > img').cropper().getData();
                            	
                            	/*console.log("裁剪后的数据",e);
                            	if(e){
                            		console.log("获取",e);
                            		that.urldata = that.base64(e);
                            	}else{
                            		console.log("没有获取到数据");
                            	}*/
                            	
                               
                             
                            
                                
                            }
                        });
                    },
                    loadcopyImg: function(img, opt) {
                        var that = this;
                        var canvas = document.createElement("canvas");
                        var square = 500;
                        var imageWidth, imageHeight;
                        if(img.width > img.height) {
                            imageHeight = square;
                            imageWidth = Math.round(square * img.width / img.height);
                        } else {
                            imageHeight = square; //this.width;
                            imageWidth = Math.round(square * img.width / img.height);
                        }
                        canvas.height = imageHeight;
                        canvas.width = imageWidth;
                        if(opt == 6) {
                            that.num = 90;
                        } else if(opt == 3) {
                            that.num = 180;
                        } else if(opt == 8) {
                            that.num = 270;
                        }
                        if(that.num == 360) {
                            that.num = 0;
                        }

                        var ctx = canvas.getContext("2d");
                        ctx.translate(imageWidth / 2, imageHeight / 2);
                        ctx.rotate(that.num * Math.PI / 180);
                        ctx.translate(-imageWidth / 2, -imageHeight / 2);
                        ctx.drawImage(img, 0, 0, imageWidth, imageHeight);
                        var dataURL = canvas.toDataURL("image/jpeg", 1);
                        return dataURL;
                    },
                    bindEvent: function() {
                        var that = this;
                        document.getElementById("quxiao").addEventListener("tap", function() {
                            mui.back(); //取消就直接返回
                        });
                        document.getElementById("xuanqu").addEventListener("tap", function() {
                            //触发上一个页面刷新图片事件
                            let cas = $('#tailoringImg').cropper('getCroppedCanvas');// 获取被裁剪后的canvas  
            				let base64 = cas.toDataURL('image/jpeg'); // 转换为base64
            				console.log(base64);
                            //let preView = plus.webview.getWebviewById('setcover');
                            //console.log(that.urldata);
                            let pageid = that.view.pageid;
                            console.log(pageid);
                            mui.fire(pageid, 'updateHeadImg', {
                                'img': base64
                            }); //不能保存图片，需要判断上传性，所以选择传值的方式，传递图片,格式为json
                            mui.back();
                        });
                    },
                    base64: function(data) {
                        var that = this;
                        var img = document.getElementById("im");

                        var canvas = document.createElement("canvas");
                        //像素
                        let width = parseInt(that.view.width);
                        let height = parseInt(that.view.height);
                        canvas.height = height;
                        canvas.width = width;
                        var bx = data.x;
                        var by = data.y;
                        var ctx = canvas.getContext("2d");
                        ctx.drawImage(img, bx, by, data.width, data.height, 0, 0, width, height);
                        var dataURL = canvas.toDataURL("image/png", 0.5); //第二个参数是质量
                        return dataURL;
                    }
                });
                var cro = new Cro();
                c.plusReady(function() {
                    cro.onReady();
                })
            })(mui)
        </script>
    </body>

</html>